import React from 'react';
import { Modal, Input, Radio, message } from 'antd';
import s from  './index.module.less';
import projectServer from '../../services/project';
import isSuccess from '../../utils/error';

const TextArea = Input.TextArea;
const Group = Radio.Group;

class CustomModal extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            foldername: '',
            isclientfolder: 0
        }
    }

    onChange = (key) => (e) => {
        this.setState({ [key]: e.target.value });
    }

    onCancel = () => {
        const { onCancel } = this.props;
        this.setState({ foldername: '', isclientfolder: 0 }, onCancel);
    }

    handleOk = async () => {
        const { projectid, stageid, onSuccess } = this.props;
        const { foldername, isclientfolder } = this.state;
        if(!foldername){
            message.warn('请输入文件夹名称');
            return;
        }
        this.setState({ confirmLoading: true });
        const res = await projectServer.customFolder({
            projectid, stageid, foldername, isclientfolder: isclientfolder ? true : false
        })
        if(isSuccess(res)){
            message.success('添加自定义文件夹成功');
            onSuccess();
            this.setState({ confirmLoading: false }, this.onCancel);
        } else this.setState({ confirmLoading: false });
    }
  
    render() {
        const { show } = this.props;
        const { confirmLoading, foldername, isclientfolder } = this.state;
        return (
            <Modal
                title="自定义文件夹"
                visible={show}
                width={350}
                okText="确定"
                cancelText="取消"
                onOk={this.handleOk}
                onCancel={this.onCancel}
                confirmLoading={confirmLoading}
                wrapClassName={s.wrapModal}
            >
                <div className={s.customContent}>
                    <div className={s.item}>
                        <div className={s.label}>文件夹名称:</div>
                        <div className={s.value}>
                            <TextArea
                                rows={3}
                                value={foldername}
                                onChange={this.onChange('foldername')}
                            />
                        </div>
                    </div>
                    <div className={s.item}>
                        <div className={s.label}>委托人可见:</div>
                        <div className={s.value}>
                            <Group onChange={this.onChange('isclientfolder')} value={isclientfolder}>
                                <Radio value={0}>否</Radio>
                                <Radio value={1}>是</Radio>
                            </Group>
                        </div>
                    </div>
                </div>
            </Modal>
        );
    }
}

export default CustomModal